<template>
        <div class="lazy-detail-page lazy-page-wrapper" :style='styles' v-if='!!currentView' @click='closeBox'>
            <div>
                <div class="lazy-page container-fluid">
                    <component ref='popup-cpt' :is="currentView" :p-params='cParams'>
                    </component>
                </div>
                <i class="ti-close right-side-toggle close-handle" @click='close'></i>
            </div>
        </div>
</template>
<style lang="scss">
    @import "../../../styles/variable";
    .lazy-detail-page{
        z-index: 10;
        position: fixed;
        top:0;
        bottom: 0;
        right: 0;
        left: 0;
        &>div{
            background-color: rgba(0,0,0,.1);
            position: relative;
            height: 100%;
            width: 100%;
            overflow: auto;
            padding: 10%;
            &::-webkit-scrollbar{
                width: 16px;
                height: 16px;
                background-color: #F5F5F5;
            }
            /*定义滚动条轨道 内阴影+圆角*/
            &::-webkit-scrollbar-track{
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                border-radius: 10px;
                background-color: #F5F5F5;
            }
            /*定义滑块 内阴影+圆角*/
            &::-webkit-scrollbar-thumb{
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: #555;
            }
            .close-handle{
                font-size: 20px;
                color: #ddd;
                background-color: #ffffff;
                box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.57);
                border-radius: 50%;
                padding: 20px;
                position: absolute;
                bottom: 10px;
                right: 10px;
                cursor: pointer;
            }
        }
        .lazy-page{
            position: absolute;
            height:calc(100%);
            overflow: auto;
            right:0;
            bottom: 0;
            width: 66%;
            background-color: $body-bg;
            box-shadow: 5px 1px 40px rgba(0,0,0,.1);
        }
    }
</style>
<script>
    import {mapGetters,mapActions} from 'vuex'
    import routerConfig from 'router/config'
    import {each} from 'utils/index'
    import {eachParents,bodySetOverflow} from 'utils/dom'
    export default {
        name:"LazyDetailCpt",
        props: {
            pParams:Object,
            pRouter:String
        },
        data() {
            return {
                currentView:false,
                styles:{},
                dParams:{},
            };
        },
        computed:{
                ...mapGetters(['device']),
            cParams(){
                if(this.pParams){
                    return this.pParams;
                }else if(this.dParams){
                    return this.dParams;
                }else {
                    return {}
                }
            }
        },
        mounted(){
            if(this.pParams&&this.pRouter){
                var n = 0;
                for(var k in this.pParams){n++;}
                if(n>0){
                    this.init({
                        pParams:this.pParams,
                        pRouter:this.pRouter,
                    });
                }
            }
        },
        methods:{
            ...mapActions(['toggleDevice']),
              init(props){
                  const ec = (config)=>{
                      each(config,(i,v)=>{
                          if(v.name&&v.name==props.pRouter){
                              this.$set(this,'styles',{
                                  paddingTop:$('#main-header').css('height')
                              });
                              this.$set(this,'currentView',v.component);
                              this.toggleDevice({popupNum:this.device.popupNum+1});
                              bodySetOverflow(true);
                          }else {
                              if(v.children&&v.children.length>0){
                                  ec(v.children);
                              }
                          }
                      })
                  };
                  ec(routerConfig)
              },
            handleOpen(props){
                this.$set(this,'dParams',props.pParams);
                if(!props.pRouter){props.pRouter = this.pRouter}
                this.init(props);
            },
            closeBox(e){
                if(e.target!=this.$refs['popup-cpt'].$el&&!eachParents(e.target,this.$refs['popup-cpt'].$el)){
                    this.close();
                }
            },
            close(){
                this.$set(this,'currentView',false);
                this.$set(this,'dParams',{});
                this.toggleDevice({popupNum:this.device.popupNum-1});
                if(this.device.popupNum==0){
                    bodySetOverflow(false);
                }
            }
        },
        beforeDestroy(){
            this.toggleDevice({popupNum:this.device.popupNum-1});
            if(this.device.popupNum==0){
                bodySetOverflow(false);
            }
        }
    }
</script>